<template>
  <div>
    <SkyCardPanel title="单选">
      <div slot="main">
        <SkyRadioGroup label="产品分类" v-model="radio1">
          <SkyRadio label="全部" value="0"></SkyRadio>
          <SkyRadio label="天猫" value="1"></SkyRadio>
          <SkyRadio label="淘宝" value="2"></SkyRadio>
          <SkyRadio label="钉钉" value="3"></SkyRadio>
          <SkyRadio label="支付宝" value="4"></SkyRadio>
        </SkyRadioGroup>
        <SkyRadioGroup label="产品状态" v-model="radio2">
          <SkyRadio label="全部" value="0"></SkyRadio>
          <SkyRadio label="已下载" value="1"></SkyRadio>
          <SkyRadio label="未下载" value="2"></SkyRadio>
        </SkyRadioGroup>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //单选
              
            &lt;SkyRadioGroup label="产品分类" v-model="radio1"&gt;
              &lt;SkyRadio label="全部" value="0"&gt;&lt;/SkyRadio&gt;
              &lt;SkyRadio label="天猫" value="1"&gt;&lt;/SkyRadio&gt;
              &lt;SkyRadio label="淘宝" value="2"&gt;&lt;/SkyRadio&gt;
              &lt;SkyRadio label="钉钉" value="3"&gt;&lt;/SkyRadio&gt;
              &lt;SkyRadio label="支付宝" value="4"&gt;&lt;/SkyRadio&gt;
            &lt;/SkyRadioGroup&gt;
            &lt;SkyRadioGroup label="产品状态" v-model="radio2"&gt;
              &lt;SkyRadio label="全部" value="0"&gt;&lt;/SkyRadio&gt;
              &lt;SkyRadio label="已下载" value="1"&gt;&lt;/SkyRadio&gt;
              &lt;SkyRadio label="未下载" value="2"&gt;&lt;/SkyRadio&gt;
            &lt;/SkyRadioGroup&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //单选
              
              export default {
                data () {
                  return {
                    radio1: '1',
                    radio2: '2',
                  }
                },
                watch: {
                  radio1 (val) {
                    console.log(val)
                  },
                  radio2 (val) {
                    console.log(val)
                  },
                }
              }
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
export default {
  data () {
    return {
      radio1: '1',
      radio2: '2',
    }
  },
  watch: {
    radio1 (val) {
      console.log(val)
    },
    radio2 (val) {
      console.log(val)
    },
  }
}
</script>

<style lang="scss" scoped>
</style>